<script setup name="WaitResult">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { reportInfo } from "../api/login.js";
const router = useRouter();
const loading = ref(false);
const state = reactive({
  arr: [
    {
      toptitle: "检测中",
      title: "正在检查中，请稍后....",
      icons: "clock",
      colors: "#2dd8ab",
      class: "p4",
    },
  ],
  carnumber: sessionStorage.getItem("carNum"),
  actives: 0,
});

// 刷新
const refresh = () => {
  loading.value = true;
  let reportNum = sessionStorage.getItem("reportNum");
  // 20240821113189
  reportInfo(reportNum)
    .then((res) => {
      if (res.code == 200) {
        let obj = {
          synResult: res.data?.synResult || null,
          carNum: res.data?.carNum || null,
          carVin: res.data?.carVin || null,
          jcCarBaseInfo: res.data?.jcCarBaseInfo || {},
          obditemList: res.data?.obditemList || [],
          organName: res.data?.organName || null,
          reportEndTime: res.data?.reportEndTime || null,
          reportNum: res.data?.reportNum || null,
          detectResult: res.data?.detectResult || null,
        };
        sessionStorage.setItem("details", JSON.stringify(obj));
        router.push("/resultPage");
      }
    })
    .catch((err) => {
      loading.value = false;
    })
    .finally(() => {
      // loading.value = false;
    });
};
</script>
<template>
  <div class="result_page_test">
    <top-title title="检测结果" @backbtn="router.go(-1)" />
    <div class="app_content">
      <div class="content">
        <van-icon
          :name="state.arr[state.actives].icons"
          size="50"
          :color="state.arr[state.actives].colors"
        />
        <p style="font-size: 22px; color: #2dd8ab">
          {{ state.arr[state.actives].toptitle }}
        </p>
        <p :class="state.arr[state.actives].class">
          {{ state.carnumber + state.arr[state.actives].title }}
        </p>
      </div>
      <div>
        <van-button
          color="#1c4880"
          block
          style="margin-top: 30px"
          @click="refresh"
          :loading="loading"
          loading-text="检测中..."
          >刷新检测结果</van-button
        >
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.result_page_test {
  .content {
    height: 200px;
    text-align: center;
    padding-top: 60px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 8px;
    // box-shadow: 1px 1px 4px #888888;
    .p1 {
      font-size: 20px;
      margin-top: 10px;
      color: #0cb683;
    }
    .p2 {
      font-size: 20px;
      margin-top: 10px;
      color: #fec600;
    }
    .p3 {
      font-size: 20px;
      margin-top: 10px;
      color: #ff3b30;
    }
    .p4 {
      font-size: 18px;
      margin-top: 10px;
      // color: #2dd8ab;
    }
  }
  .button_class {
    text-align: center;
  }
}
</style>
